<template>
  <!-- 视频文件 -->
  <div class="rounded-lg bg-gray-100 py-2 pr-1 pl-3" v-if="fileType === 'video'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-shipin"></use>
    </svg>
  </div>
  <!-- 图片文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'image'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-tupianwenjian"></use>
    </svg>
  </div>
  <!-- 音频文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'audio'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-yinpinwenjian"></use>
    </svg>
  </div>
  <!-- 压缩文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'zip'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-yasuobaowenjian"></use>
    </svg>
  </div>
  <!-- 表格文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'excel'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-biaogewenjian"></use>
    </svg>
  </div>
  <!-- 演示文稿文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'ppt'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-baiwangyun-PPTwenjian"></use>
    </svg>
  </div>
  <!-- 文档文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'word'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-wordwenjian"></use>
    </svg>
  </div>
  <!-- pdf文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'pdf'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-pdfwenjian"></use>
    </svg>
  </div>
  <!-- psd文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else-if="fileType === 'psd'">
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-PSD"></use>
    </svg>
  </div>
  <!-- 其他文件 -->
  <div class="rounded-lg bg-gray-100 p-2" v-else>
    <svg class="icon text-3xl" aria-hidden="true">
      <use xlink:href="#icon-weizhiwenjian"></use>
    </svg>
  </div>
</template>

<script setup lang="ts">
const props = defineProps({
  fileType: {
    type: String,
    default: '' as 'video' | 'image' | 'audio' | 'zip' | 'excel' | 'ppt' | 'word' | 'pdf' | 'psd',
  },
})
console.log('props.fileType', props.fileType)
</script>
